
<template>
    <div class="growth">
      <van-nav-bar
        title="生长曲线"
        left-text="返回"
        left-arrow
        @click="onClickLeft"
      />
    <van-tabs v-model:active="active">
  <van-tab title="身高曲线">

    <van-tabs v-model:active="active1">
  <van-tab title="0-1岁">
   <Chart1></Chart1>
  </van-tab>
  <van-tab title="1-3岁">
     <Chart2></Chart2>
  </van-tab>
  <van-tab title="3-7岁">
         <Chart3></Chart3>
  </van-tab>

</van-tabs>
  </van-tab>
  <van-tab title="体重曲线">
     <van-tabs v-model:active="active1">
  <van-tab title="0-1岁">
       <Chart4></Chart4>
  </van-tab>
  <van-tab title="1-3岁">
       <Chart5></Chart5>
  </van-tab>
  <van-tab title="3-7岁">
     <Chart6></Chart6>
  </van-tab>

</van-tabs>
  </van-tab>


</van-tabs>
      <div class="record">
        <span class="time">1个月5天</span>
        <span class="height">标准身高:51.3cm~59.0cm</span>
      </div>
      <div class="history">
        <span class="code">历史记录</span>
        <span class="baby">了解宝宝身体情况</span>
      </div>
      </div>
  <!-- <div id="growth-chart-container">
     <h3>儿童生长曲线</h3>
     <div ref="chartRef"></div>
  </div> -->
</template>
  <script setup lang="ts">
  import { ref,onMounted } from 'vue';
  import Chart1 from '../../components/echarts/index1.vue';
  import Chart2 from '../../components/echarts/index2.vue';
  import Chart3 from '../../components/echarts/index3.vue';
  import Chart4 from '../../components/echarts/index4.vue';
  import Chart5 from '../../components/echarts/index5.vue';
  import Chart6 from '../../components/echarts/index6.vue';



const active = ref(0);
 const active1 = ref(0);
const onClickLeft = () => history.back();
// interface GrowthData{
//   age:number;
//   height:number;
//   weight:number;
// }
// const chartRef = ref(null);
// const growthData=ref<GrowthData[]>([
//   {
//     age:0-1,height:51.3,weight:12
//   },
//   {
//     age:1-3,height:105,weight:18
//   },
//   {
//     age:3-7,height:135,weight:30
//   },
// ])
// onMounted(()=>{
//   const myChart=echarts.init(chartRef.value as HTMLElement);
//   const xAxisData:number[]=growthData.value.map(item=>item.age);
//   const heightData:number[]=growthData.value.map(item=>item.height);
//   const weightData:number[]=growthData.value.map(item=>item.weight);
//   const option={
//     title:{
//       text:'儿童生长曲线'
//     },
//     tooltip:{
//       trigger:'axis'
//     },
//     legend:{
//       data:['身高','体重']
//     },
//     xAxis:{
//       type:'category',
//       data:xAxisData
//     },
//     yAxis:{
//       type:'value'
//     },
//     series:[
//       {
//         name:'身高',
//         type:'line',
//         data:heightData
//       },
//       {
//         name:'体重',
//         type:'line',
//         data:weightData
//       }
//     ]
//   };
//   myChart.setOption(option);
// })
</script>
<style scoped lang="scss">
.growth{
  width: 100%;


  .record{
     width: 90%;
     height: 35px;
     display: flex;
     justify-content: space-between;
     background: #f36279;
     border-radius: 5px;
     margin:0 auto;
     color: #fff;
     line-height: 35px;
  }
  .history{
    width: 90%;
    height: 35px;
    display: flex;
    justify-content: space-between;
    background: #fff4f6;
    border-radius: 5px;
    margin:0 auto;
    color: #f36279;
    border: 1px solid #f36279;
    margin-top: 10px;
    line-height: 35px;
  }
}
#growth-chart-container{
  width: 800px;
  height: 400px;
  margin: 0 auto;
}
</style>
